<template>
	<view class="container">
		<view class="imageList" v-for="(item,index) in imgList" :key="index">
			<image class="floorView" v-if="index == currentImage" :src="item.floorImage" mode="widthFix"></image>
		</view>

		<swiper class="topView" circular="true"  autoplay="true" :interval="interval"
			duration="400" @change="handlerChange">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<view class=" topView">
					<image class="topView" :src="(item.image)" mode="widthFix" lazy-load="true" :data-index="index">
					</image>
				</view>
			</swiper-item>
		</swiper>
	</view>


</template>

<script>
	export default {
		props: {
			// 时间间隔
			interval: {
				type: [Number, String],
				default: 8000
			},
			// 轮播图数组数据
			imgList: {
				type: Array,
				default () {
					return []
				}
			}


		},
		data() {
			return {
				currentImage: 0,
			}
		},
		methods: {
			handlerChange(e) {
				this.currentImage = e.detail.current
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
height: 400px;
		.imageList {
			position: relative;

			.floorView {
				margin-top: 0;
				margin-left: 0;
				width: 100vw;
				height: 458px;
				position: absolute;
				top: 0;
				left: 0;
				animation: fadeOut ease 1.5s;
			}
		}

		.topView {
			position: absolute;
			top: 0;
			left: 0;
			mix-blend-mode: hard-light;
			width: 100vw;
			height: 458px;

		}

	}


	@keyframes fadeOut {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>